<template>
  <div class="user_main">
    <el-container>
      <el-header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>道路检测数据管理</el-breadcrumb-item>
          <el-breadcrumb-item>病害信息管理</el-breadcrumb-item>
        </el-breadcrumb>

      </el-header>
      <el-main>
        <el-button class="el-button--small" @click="insertBtnFunc()">新增<span class="el-icon-plus"></span></el-button>

        <el-table :data="tableData" stripe style="width: 100%">

          <el-table-column prop="version" label="版本" width="180">
          </el-table-column>
          <el-table-column prop="label" label="目标信息" width="180">
          </el-table-column>
          <el-table-column prop="shapeType" label="目标检测">
          </el-table-column>
          <el-table-column label="图片">
            <template #default="props">
              {{props.imagePath}}
              <div class="images" v-viewer="{movable: false}">
                <img
                  style="width: 50px; margin: 5px; height: 50px"
                  :src="props.row.imagePath"
                  :data-source="props.row.imagePath"
                  @click="showImg()"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template #default="props">
              <el-row>
                <el-button
                  size="mini"
                  type="primary"
                  @click="eitBtnFunc(props.row)"
                  icon="el-icon-edit"
                ></el-button>

                <el-button
                  size="mini"
                  type="primary"
                  @click="deleteBtnFunc(props.row.id)"
                  icon="el-icon-delete"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.currPage"
          :page-sizes="[2, 5, 10, 20, 50, 100]"
          :page-size="queryParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        ></el-pagination>
      </el-footer>
    </el-container>


    <el-dialog
      :visible.sync="insertDialogVisible"
      width="60%"
      height="60%"
      top="5vh"
      title="新增病害信息"
      :close-on-click-modal="true"
      @close="insertDialogClosed"
      :close-on-press-escape="true"
    >
      <el-form :model="insertInfo" :inline="true" class="demo-form-inline" :label-position="labelPosition"
               ref="insertInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item label="版本:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.version">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="目标信息:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.label">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="组id:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.groupId">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="目标检测:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.shapeType">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="病害图片:" :label-position="labelPosition"
                          label-width="120px">
              <el-upload
                class="upload-demo"
                action="/upload"
                drag
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-button size="small" type="primary" style="margin-left:250%"
                       @click="insertDiseaseInfo()">确认
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      height="60%"
      top="5vh"
      title="编辑病害信息"
      :close-on-click-modal="true"
      @close="updateDialogClosed"
      :close-on-press-escape="true"
    >
      <el-main
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-form :model="updateInfo" :inline="true" class="demo-form-inline" :label-position="labelPosition"
                 ref="updateInfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="版本:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.version">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="目标信息:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.label">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="组id:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.groupId">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标检测:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.shapeType">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="病害图片:" :label-position="labelPosition"
                            label-width="120px">
                <el-upload
                  class="upload-demo"
                  action="/upload"
                  drag
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="8">
              <el-button size="small" type="primary" style="margin-left:250%"
                         @click="updateDiseaseInfo()">确认
              </el-button>
            </el-col>
          </el-row>

        </el-form>
      </el-main>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import ApiUrl from "@/ApiUrl";


  export default {
    data() {
      return {
        tableData: [],
        totalNum: 0,
        updateInfo: {
          version: '1',
          label: '2',
          groupId: '3',
          shapeType: '4',
          imagePath: '3',
        },
        insertInfo: {
          version: '1',
          label: '2',
          groupId: '3',
          shapeType: '4',
          imagePath: '3',
        },
        total: "",
        labelPosition: "left",
        queryParam: {
          currPage: 1,
          pageSize: 10,
        },
        dialogVisible: false,
        insertDialogVisible: false,
      };
    },
    methods: {

      /**
       * 查询病害数据
       **/
      queryDiseaseList(searchBtn) {
        searchBtn &&
        (this.queryParam.currPage = 1) &&
        (this.queryParam.pageSize = 10);
        const res = axios
          .post(ApiUrl.queryDiseaseList, this.queryParam)
          .then((val) => {
            let data = val.data;
            this.tableData = data.data;
            this.totalNum = data.count;
            console.info(this.tableData);
          });
      },


      /**
       *
       * 新增病害数据
       * */
      insertDiseaseInfo() {
        console.info(this.insertInfo)
        const res = axios
          .post(ApiUrl.insertInfoUrl, this.insertInfo)
          .then((val) => {
            if (val.status === 200) {
              this.insertDialogVisible = false;
              this.queryDiseaseList();
            } else {
              this.$message({
                type: "error",
                message: "新增失败",
              });
            }
          });
      },

      /**
       *
       * 修改病害数据
       * */
      updateDiseaseInfo() {
        const res = axios
          .put(ApiUrl.updateDiseaseInfo, this.updateInfo)
          .then((val) => {
            if (val.status === 200) {
              this.dialogVisible = false;
              this.queryDiseaseList();
            } else {
              this.$message({
                type: "error",
                message: "修改失败",
              });
            }
          });
      },

      /**
       *
       * 删除病害数据
       * */
      deleteBtnFunc(id) {
        let url = ApiUrl.deleteDiseaseInfo+"/"+id
        const res = axios
          .delete(url)
          .then((val) => {
            if (val.status === 200) {
              this.queryDiseaseList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
      },

      /**
       *打开修改弹框
       **/
      eitBtnFunc(item) {
        this.dialogVisible = true;
        this.updateInfo = item;
      },

      /**
       *打开新增弹框
       **/
      insertBtnFunc() {
        this.insertDialogVisible = true;
      },


      /**
       * 修改弹框关闭
       **/
      updateDialogClosed() {
        this.dialogVisible = false;
        this.updateInfo = {}
      },

      /**
       * 新增弹框关闭
       **/
      insertDialogClosed() {
        this.insertDialogVisible = false;
        this.insertInfo = {
          version: '',
          label: '',
          groupId: '',
          shapeType: '',
          imagePath: '',
        }
      },

      //展示图片
      showImg() {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },

      /**
       * 每页查询条数变化
       **/
      handleSizeChange(newPageSize) {
        this.queryParam.pageSize = newPageSize;
        this.queryParam.currPage = 1;
        this.queryDiseaseList();
      },

      /**
       * 监听切换页码
       * @param newCurrentPage
       */
      handleCurrentChange(newCurrentPage) {
        this.queryParam.currPage = newCurrentPage;
        this.queryDiseaseList();
      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }

        return isJPG;
      }

    },
    created() {
      this.queryDiseaseList();
    },
  };
</script>

<style scoped></style>
